<script lang="ts" setup>
import { reactive, ref, computed, onMounted, onActivated, onDeactivated } from 'vue';
import { Plus, EditPen, Delete, RefreshLeft, Search, Upload } from '@element-plus/icons-vue';
import type { FormInstance } from 'element-plus';
import { useRouter, onBeforeRouteLeave } from 'vue-router';

import { useKeepAliveStore } from '@/stores/keepAlive';

const keepStroe = useKeepAliveStore();

// 缓存页面要用到name
defineOptions({
  name: 'feiyong-two-one-organization'
});

const showForm = ref(true);
const showMore = ref(false);
const formRef = ref<FormInstance>();
const router = useRouter();
const sizeForm = reactive({
  code: '',
  name: '',
  department: '',
  status: '',
  date: '',
  reason: '',
  type: ''
});
const showMoreText = computed(() => {
  return showMore.value ? '收起' : '展开';
});
const showText = computed(() => {
  return showForm.value ? '收起搜索条件' : '展开搜索条件';
});
const optForm = () => {
  showForm.value = !showForm.value;
};
const tableData: any = [
  {
    code: 'CLFG4121231233123121',
    name: '张三',
    department: '技术部',
    date: '2023-10-12',
    type: '其他费用',
    reason: '采购经费',
    status: '已关联',
    approvalStatus: '审批通过'
  },
  {
    code: 'CLFG4121231233123122',
    name: '张三',
    department: '技术部',
    date: '2023-10-12',
    type: '其他费用',
    reason: '采购经费',
    status: '已关联',
    approvalStatus: '审批拒绝'
  }
];
for (let i = 0; i < 10; i++) {
  tableData.push({
    code: 'CLFG4121231233123123' + i,
    name: '张三',
    department: '技术部',
    date: '2023-10-12',
    type: '其他费用',
    reason: '采购经费',
    status: '已关联',
    approvalStatus: '审批中'
  });
}
const classType = (status: string) => {
  let className: string = '';
  switch (status) {
    case '审批中':
      className = 'examineing';
      break;
    case '审批拒绝':
      className = 'examine-faild';
      break;
    case '审批通过':
      className = 'approved';
      break;
  }
  return className;
};
/**
 * 清除查询条件
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
/**
 * 删除
 */
const deleteRow = () => {};
/**
 * 添加
 */
const goAdd = () => {
  router.push({ path: '/feiyong/add' });
};
/**
 * 查看详情
 */
const openDetail = (code: string) => {
  router.push({
    name: 'feiyong-two-one-organization-detail',
    params: {
      id: code
    }
  });
};

onMounted(() => {
  console.log('onMounted...feiyong/two-one/organization...');
});

onActivated(() => {
  console.log('onActivated...feiyong/two-one/organization...');
});

onDeactivated(() => {
  console.log('onDeactivated...feiyong/two-one/organization...');
});

// 在导航离开渲染该组件的对应路由时调用
onBeforeRouteLeave((to, from, next) => {
  // 如果导航到不是详情页就不缓存
  if (to.name !== 'feiyong-two-one-organization-detail') {
    keepStroe.setNoKeepAlive(keepStroe.secondKeepAliveRoute, from.name as string);
  }
  next();
});
</script>
<template>
  <el-card class="table-main">
    <div class="option-wrap" @click="optForm">
      <span class="option-btn">
        通用列表
        <el-icon>
          <component :is="showForm ? 'ArrowDown' : 'ArrowUp'"></component>
        </el-icon>
      </span>
      <span class="option-text">{{ showText }}</span>
    </div>
    <div v-show="showForm">
      <el-form
        ref="formRef"
        :inline="true"
        label-position="top"
        :model="sizeForm"
        label-width="auto"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="申请单号" prop="name">
              <el-input v-model="sizeForm.code" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人" prop="name">
              <el-input v-model="sizeForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请状态" prop="department">
              <el-select v-model="sizeForm.status" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请部门" prop="name">
              <el-input v-model="sizeForm.department" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="申请日期" prop="name">
              <el-date-picker v-model="sizeForm.date" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请事由" prop="name">
              <el-input v-model="sizeForm.reason" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型" prop="name">
              <el-select v-model="sizeForm.type" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据状态" prop="name">
              <el-select v-model="sizeForm.type" />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="showMore">
            <el-form-item label="其他条件" prop="name">
              <el-input v-model="sizeForm.reason" />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="btn-position">
            <el-form-item label=" ">
              <el-button :icon="Search" type="primary">查询</el-button>
              <el-button :icon="RefreshLeft" type="primary" plain @click="resetForm(formRef)">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-show="showForm" class="segment-line"></div>
    <div class="show-more" v-show="showForm">
      <span @click="showMore = !showMore">
        {{ showMoreText }}
        <el-icon>
          <component :is="showMore ? 'ArrowUp' : 'ArrowDown'"></component>
        </el-icon>
      </span>
    </div>
    <div class="table-options">
      <el-button :icon="Plus" type="primary" @click="goAdd()">新增</el-button>
      <el-button :icon="EditPen" type="primary" plain>编辑</el-button>
      <el-button :icon="Upload" type="primary" plain>导出</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="编号" width="55" />
      <el-table-column prop="code" label="申请单号" width="200">
        <template #default="scope">
          <el-link type="primary" @click="openDetail(scope.row.code as string)">
            {{ scope.row.code }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="申请人" />
      <el-table-column prop="department" label="申请部门" />
      <el-table-column prop="date" label="申请日期" width="110" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="reason" label="申请事由" />
      <el-table-column prop="status" label="单据状态" />
      <el-table-column prop="approvalStatus" label="审批状态" width="110">
        <template #default="scope">
          <span class="zm-tag" :class="classType(scope.row.approvalStatus)" type="primary">
            {{ scope.row.approvalStatus }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default>
          <el-button link type="primary" @click.prevent="deleteRow()">
            <template #icon>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-back"></use>
              </svg>
            </template>
            撤回
          </el-button>
          <el-button link type="primary" :icon="Delete" @click.prevent="deleteRow()">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrap">
      <el-pagination
        layout="sizes,prev, pager, next"
        :page-sizes="[10, 20, 30, 50]"
        :total="tableData.length"
      ></el-pagination>
    </div>
  </el-card>
  <!-- <div>
    <el-input v-model="value" placeholder=""></el-input>
    <RouterLink to="/feiyong/two-one/detail">详情页</RouterLink>
  </div> -->
</template>
<style scoped>
.el-input {
  --el-input-width: 220px;
}
.option-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  font-size: 14px;
}
.option-wrap .option-btn {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.option-wrap .option-text {
  color: var(--el-color-primary);
}
.table-options {
  padding: 15px 0;
}
.pagination-wrap {
  padding: 15px 0;
  display: flex;
  justify-content: center;
}
.segment-line {
  height: 1px;
  background-color: var(--el-color-primary-light-9);
  margin-top: 15px;
}
.table-main {
  display: flex;
  flex-direction: column;
}
.zm-tag {
  margin-left: 10px;
  position: relative;
}
.zm-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--el-color-primary);
  display: inline-block;
  position: absolute;
  left: -10px;
  top: 8px;
}
.examineing {
  color: var(--el-color-primary);
}
.examine-faild {
  color: var(--el-color-danger);
}
.examine-faild::before {
  background-color: var(--el-color-danger);
}
.approved {
  color: var(--el-color-success);
}
.approved::before {
  background-color: var(--el-color-success);
}
.show-more {
  text-align: center;
  font-size: 12px;
  color: var(--el-color-primary);
}
.show-more span {
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px 0px 10px;
}
.btn-position {
  display: flex;
  align-items: end;
}
</style>
